<template>
  <div class="activeBox" v-loading="loading">
    <!-- 活动商品列表 -->
    <div class="twoBox" v-if="this.goodsList.length !== 0">
      <div class="fristPic">
        <img
          style="margin-top: 10px"
          width="1240px"
          height="400px"
          :src="thumb"
          alt="活动图片"
        />
      </div>
      <!-- <div class="center">
        <el-divider content-position="center">活动商品</el-divider>
      </div> -->
      <div class="center">
        <img alt="" height="54px" src="/images/left.png" width="450px" />
        <div>
          <!-- <h1>{{ this.activityName }}</h1> -->
          <h1>活动商品</h1>
        </div>
        <img alt="" height="54px" src="/images/right.png" width="450px" />
      </div>
      <div class="activeGoods">
        <div
          class="goods"
          v-for="(item, index) in goodsList"
          :key="index"
          @click="goGoodsDetail(item)"
        >
          <img
            height="219px"
            width="232px"
            :src="item.thumb"
            alt="活动商品图片"
          />
          <div class="text-wrapper">
            <el-tooltip
              v-if="item.name.length > 10"
              class="item"
              effect="dark"
              :content="item.name"
              placement="top-start"
            >
              <span>{{ item.name }}</span>
            </el-tooltip>
            <span v-else>{{ item.name }}</span>
          </div>
          <div>￥{{ item.priceCurrent / 100 }}/{{ item.unit }}</div>
        </div>
      </div>
    </div>
    <!-- 空状态 -->
    <div class="firstBox" v-else>
      <el-empty :image-size="300" description="暂无活动商品"></el-empty>
    </div>
    <!-- 平台优势 -->
    <div class="wrap">
      <div>
        <img alt="" height="54px" src="/images/37.png" width="1240px" />
      </div>
      <div class="advantage">
        <div>
          <img alt="" height="90px" src="/images/38.png" width="90px" />
          <h3>快递100为您实时查询物流</h3>
          <span
            >为您提供贴心、精准、实时的快递单号 查询，自动跟踪您的快递进度</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/39.png" width="90px" />
          <h3>安全的支付方式</h3>
          <span
            >使用全球领先的独立第三方支付平台，为
            广大用户提供安全快速的手机支付</span
          >
        </div>
        <div>
          <img alt="" height="90px" src="/images/40.png" width="90px" />
          <h3>顾客购物</h3>
          <span>24小时疯狂购，随时随地可购物，我 们随时为你提供服务</span>
        </div>
        <div>
          <img alt="" height="90px" src="/images/41.png" width="90px" />
          <h3>支付宝为您提供快速支付</h3>
          <span>支付宝为你提供简单、安全、快速的支付， 让您购物更省心</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { throttle } from "lodash";
import { GoActivePage } from "@/api/mallApi/managementend/marketing";
export default {
  name: "ActivePage",
  data() {
    return {
      goodsList: [],
      thumb: "",
      loading: true,
      activityName: "活动商品",
      goShopping: false,
      pageNo: 1,
      pageSize: 10,
      totalPage: 1,
      threshold: 800, // 距离底部多少像素时触发加载
    };
  },
  methods: {
    goGoodsDetail(query) {
      this.$router.push({
        path: "/mall/product",
        query,
      });
    },
    handleScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; // 获取当前滚动位置
      const windowHeight = window.innerHeight; // 获取视口高度
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight; // 获取文档总高度
      if (scrollHeight - (scrollTop + windowHeight) < this.threshold) {
        // 判断是否已滚动到底部
        this.getList(); // 触发加载更多
      }
    },
    getList() {
      if (this.pageNo > this.totalPage) return;
      this.loading = true;
      const params = {
        activityId: this.$route.query.activityId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      GoActivePage(params)
        .then((res) => {
          if (res.code !== "00000") return;
          this.pageNo++;
          this.thumb = res.data.thumb;
          this.goodsList = [...this.goodsList, ...res.data.result.rows];
          this.totalPage = res.data.result.totalPage;
          this.activityName = res.data.activityName;
          this.loading = false;
        })
        .catch((err) => {
          console.log("err", err);
          this.loading = false;
        });
    },
  },
  created() {},
  mounted() {
    this.getList(); // 首次加载数据
    window.addEventListener("scroll", throttle(this.handleScroll, 1000)); // 绑定滚动事件
  },
  beforeDestroy() {
    window.removeEventListener("scroll", throttle(this.handleScroll, 1000)); // 解绑滚动事件
  },
};
</script>

<style lang="scss" scoped>
.activeBox {
  background-image: url(/images/10.png);
  background-size: cover;
  .firstBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 1240px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
  }
  .twoBox {
    width: 1240px;
    margin: 0 auto;
    .fristPic {
      width: 100%;
      height: 400px;
      margin-bottom: 30px;
    }
    .center {
      display: flex;
      margin-bottom: 20px;
      div {
        display: block;
        text-align: center;
        background-color: white;
        width: 340px;
        height: 54px;
        line-height: 10px;
        font-weight: 900;
      }
      // width: 100%;
      // height: 50px;
      // margin-bottom: 20px;
      // .el-divider__text.is-center {
      //   font-size: 20px;
      //   font-weight: bolder;
      // }
      // .el-divider--horizontal {
      //   margin-top: 8px;
      //   border-bottom: 4px solid #ebeef5;
      // }
    }
    .activeGoods {
      font-size: 16px;
      width: 100%;
      background-color: aqua;
      .goods {
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.36);
        border-radius: 4px;
        cursor: pointer;
        float: left;
        width: 232px;
        height: 317px;
        margin-bottom: 10px;
        margin-left: 13px;
        position: relative;
        .text-wrapper {
          position: absolute;
          left: 5px;
          top: 229px;
          width: 100%;
          span {
            width: 100%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
        > div:nth-child(3) {
          position: absolute;
          left: 3px;
          top: 269px;
          font-family: "Source Han Sans CN Bold";
          font-weight: 700;
          font-size: 20px;
          color: #ff6b00;
        }
      }
    }
  }

  .advantage {
    // background-color: red;
    display: flex;
    margin: 0 auto;

    div {
      // background-color: #d3dce6;
      text-align: center;
      padding: 18px;

      H3 {
        font-size: 22px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}
</style>
